<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <script src="./template-web.js" ></script>
</head>
<body>
    <div id="div"></div>
    <!-- 模板 -->
    <script type="text/html" id="tt">
        <div>姓名：<span>{{@name}}</span></div>
        <div>年龄：<span>{{age}}</span></div>
        <div>会员：<span>{{isVip ? '会员':'不是会员'}}</span></div>
        <div>注册时间：<span>{{regTime | df}}</span></div>
    </script>
    <script>
        template.defaults.imports.df= function(date){
            var date = new Date(date)
            var y = date.getFullYear()
            var m = date.getMonth()+1
            var d = date.getDate()
            return y+'-'+m+'-'+d
        }
        $(function(){
            // 数据
        var data = {
            title: '用户信息',
            name:'<h3>张三</h3>',
            age :20,
            isVip :true,
            regTime:new Date()
        }
        // console.log(new Date());
        // 模板与数据关联
        let str = template('tt',data);
        // 显示数据
        $('div').html(str);
        })
    </script>
</body>
</html>